<template>
	<!-- 首页 -->
	<view class="app">
		<!-- header -->
		<view class="header">
			<!-- 置顶 -->
			<view class="top-bar">
				<u-icon class="icon" name="list-dot" color="#eee" size="64"
					@click="pageTo('/pages/index/nav')"></u-icon>
				<view class="search-bar">
					<u-search placeholder="输入关键词搜索" v-model="keyword" :show-action="false" shape="square" @search="search"></u-search>
				</view>
				<u-icon class="icon" name="setting" color="#eee" size="56" @click=""></u-icon>
			</view>
			<!-- 轮播图 -->
			<view class="banner-bar">
				<u-swiper :list="bannerList" height="400" :title="false" name="images"></u-swiper>
			</view>
			<!-- 导航 -->
			<view class="nav-bar">
				<u-grid :col="5">
					<u-grid-item :custom-style="navItemStyle" v-for="(item, index) in navList" :key="index"
						@click="clickNav(index)">
						<image class="nav-icon" :src="item.icon" mode=""></image>
						<view class="nav-text">{{item.name}}</view>
					</u-grid-item>
					<u-grid-item :custom-style="navItemStyle" @click="clickNavMore()">
						<image class="nav-icon" :src="navMoreIcon" mode=""></image>
						<view class="nav-text">更多</view>
					</u-grid-item>
				</u-grid>
			</view>
			<!-- 公告栏 -->
			<view class="notice-bar">
				<image class="notice-image" :src="noticeImage" mode=""></image>
				<view class="notice-main">
					<maoScroll :data="noticeList" :showNum="showNum" :lineHeight="lineHeight"
						:animationScroll="animationScroll" :animation="animation">
						<template v-slot="{line}">
							<view class="notice-line" @click="clickNotice(line.id)">
								<view class="notice-tag">热门</view>
								<view class="text common-text">{{line.title}}</view>
							</view>
						</template>
					</maoScroll>
				</view>
			</view>
		</view>
		<!-- body -->
		<view class="body">
			<!-- 醒目广告 -->
			<view class="section ad-bar">
				<image class="ad-image" :src="fbxxImage" mode=""></image>
				<image class="ad-image" :src="sjrzImage" mode=""></image>
			</view>
			<!-- 主题栏目-产品供应 -->
			<view class="section">
				<!-- 主标题 -->
				<view class="section-title-bar">
					<u-section title="产品供应" sub-title="更多>>" :font-size="sectionFontSize" :bold="sectionBold"
						:color="sectionColor" :line-color="sectionLineColor" :show-line="true" :arrow="false"
						@click="pageTo('/pages/product/list')"></u-section>
				</view>
				<!-- 类别 -->
				<view class="cat-bar">
					<u-tabs active-color="red" :list="cpgyCategoryList" :is-scroll="false" v-model="cpgyCurrent"
						@change="cpgyChange"></u-tabs>
				</view>
				<!-- 内容 -->
				<view class="imglist-bar">
					<view class="imglist-item" v-for="(item, index) in cpgyList" :key="index"
						@click="toDetail(item.id)">
						<view class="thumb">
							<image class="" :src="item.images" mode=""></image>
						</view>
						<view class="text-bar">
							<text class="text common-text">{{item.title}}</text>
							<text class="text price">￥{{item.price}}</text>
							<text class="text common-text">地区：{{item.origin}}</text>
							<text class="text higher common-text">{{item.company}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 主题栏目-优选品牌 -->
			<view class="section">
				<!-- 主标题 -->
				<view class="section-title-bar">
					<u-section title="优选品牌" sub-title="更多>>" :font-size="sectionFontSize" :bold="sectionBold"
						:color="sectionColor" :line-color="sectionLineColor" :show-line="true" :arrow="false"
						@click="pageTo('/pages/brand/list')"></u-section>
				</view>
				<!-- 类别 -->
				<view class="cat-bar">
					<u-tabs active-color="red" :list="yxppCategoryList" :is-scroll="false" v-model="yxppCurrent"
						@change="yxppChange"></u-tabs>
				</view>
				<!-- 内容 -->
				<view class="grid-bar">
					<view class="grid-item3" v-for="(item, index) in yxppList" :key="index" @click="toDetail(item.id)">
						<image :src="item.images" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 主题栏目-商品推荐 -->
			<view class="section">
				<!-- 主标题 -->
				<view class="section-title-bar">
					<u-section title="商品推荐" sub-title="更多>>" :font-size="sectionFontSize" :bold="sectionBold"
						:color="sectionColor" :line-color="sectionLineColor" :show-line="true" :arrow="false"
						@click="pageTo('/pages/malls/list')"></u-section>
				</view>
				<!-- 内容 -->
				<view class="grid-bar">
					<view class="grid-item2 grid-text-item" v-for="(item, index) in sptjList" :key="index"
						@click="toDetail(item.id)">
						<text class="price">￥{{item.price.toFixed(2)}}</text>
						<text class="text2 common-text">{{item.supplier}}</text>
						<text class="text common-text-row2">{{item.title}}</text>
					</view>
				</view>
			</view>
			<!-- 主题栏目-企业名录 -->
			<view class="section qyml">
				<!-- 主标题 -->
				<view class="section-title-bar">
					<u-section title="企业名录" sub-title="更多>>" :font-size="sectionFontSize" :bold="sectionBold"
						:color="sectionColor" :line-color="sectionLineColor" :show-line="true" :arrow="false"
						@click="pageTo('/pages/company/list')"></u-section>
				</view>
				<!-- 内容 -->
				<view class="imglist-bar">
					<view class="imglist-item" v-for="(item, index) in qymlList" :key="index"
						@click="toDetail(item.id)">
						<image class="thumb" :src="item.images" mode=""></image>
						<view class="text-bar">
							<text class="title common-text">{{item.name}}</text>
							<text class="text common-text">{{item.goods}}</text>
							<view class="text2 common-text row">
								<u-icon class="icon" name="map" color="#333" size="24" @click=""></u-icon>
								{{item.country}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 主题栏目-资讯头条 -->
			<view class="section zxtt">
				<!-- 主标题 -->
				<view class="section-title-bar">
					<u-section title="资讯头条" sub-title="更多>>" :font-size="sectionFontSize" :bold="sectionBold"
						:color="sectionColor" :line-color="sectionLineColor" :show-line="true" :arrow="false"
						@click="pageTo('/pages/news/list')"></u-section>
				</view>
				<!-- 内容 -->
				<view class="imglist-bar">
					<view class="imglist-item" v-for="(item, index) in zxttList" :key="index"
						@click="toDetail(item.id)">
						<image class="thumb" :src="item.images" mode=""></image>
						<view class="text-bar">
							<text class="title">{{item.title}}</text>
							<view class="text2 row">
								<view class="row">
									<u-icon class="icon" name="clock" color="#333" size="18" @click=""></u-icon>
									{{item.publish_time_str.substr(0, 10)}}
								</view>
								<view class="row row-end">
									<u-icon class="icon" name="chat" color="#333" size="24" @click=""></u-icon>
									<view class="noc">{{item.noc}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-back-top :scroll-top="scrollTop"></u-back-top>
		</view>
		<!-- footer -->
		<view class="footer">
		</view>
		<u-tabbar :list="vk.getVuex('$tabbar')"></u-tabbar>
	</view>
</template>

<script>
	import config from "@/app.config.js";

	import BANNER from "@/data/banner.js";
	import NEWS from "@/data/news.js";
	import GOODS from "@/data/goods.js";
	import GOODS_CATEGORY from "@/data/goodsCategory.js";
	import BRAND from "@/data/brand.js";
	import BRAND_CATEGORY from "@/data/brandCategory.js";
	import SUPPLIER from "@/data/supplier.js";

	let $GLOBAL = getApp().globalData;

	import maoScroll from '@/components/mao-scroll/mao-scroll.vue';

	export default {
		components: {
			maoScroll
		},
		data() {
			return {
				disabled: false,
				navList: getApp().globalData.navList, // 导航

				keyword: '', // 搜索关键字
				scrollTop: 0, // 返回顶部

				bannerList: [], // 轮播图
				noticeList: [], // 公告
				// 滚动通知栏参数
				count: 30,
				showNum: 2,
				lineHeight: 60,
				animationScroll: 800,
				animation: 2000,
				cpgyList: [], // 产品供应列表
				cpgyCategoryList: [], // 产品供应类别
				cpgyCurrent: 0, // 当前选中的产品供应类别
				yxppList: [], // 优选品牌列表
				yxppCategoryList: [], // 优选品牌类别
				yxppCurrent: 0, // 当前选中的优选品牌类别
				sptjList: [], // 商品推荐列表
				qymlList: [], // 企业名录列表
				zxttList: [], // 资讯头条列表

				navMoreIcon: this.$resource.navMoreIcon,
				noticeImage: this.$resource.noticeImage,
				fbxxImage: this.$resource.fbxxImage,
				sjrzImage: this.$resource.sjrzImage,

				navItemStyle: {
					padding: '18rpx 16rpx 40rpx',
					color: "#999",
				},

				sectionFontSize: this.$css.sectionFontSize,
				sectionBold: this.$css.sectionBold,
				sectionColor: this.$css.sectionColor,
				sectionLineColor: this.$css.sectionLineColor,

				tabActiveColor: this.$css.tabActiveColor,

				src: ""
			}
		},
		onLoad(options = {}) {
			// #ifdef H5
			this.$nextTick(() => {
				// #endif
				this.initPage(options);
				// #ifdef H5
			})
			// #endif
		},
		onReady() {

		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			initPage() {
				// uni.$once('nav-init', () => {
				// 	console.log('导航列表uni.$once', getApp().globalData)
				// 	this.getNavList();
				// })
				this.getNavList();
				this.getBannerList();
				this.getNoticeList();
				this.getCpgyList();
				this.getCpgyCategoryList();
				this.getYxppList();
				this.getYxppCategoryList();
				this.getSptjList();
				this.getQymlList();
				this.getZxttList();
			},
			// 点击了搜索
			search(){
				if (config.debug) console.log('搜索', this.keyword)
				vk.toast('搜索' + this.keyword);
			},
			// 读取导航列表
			getNavList() {
				// this.navList = getApp().globalData.navList;
				this.navList = getApp().globalData.navList.filter(item => item.is_index);
				if (config.debug) console.log('读取导航列表', this.navList)
			},
			// 点击了导航
			clickNav(index) {
				if (config.debug) console.log('点击了导航', index)
				
				let nav = this.navList[index];
				if (config.debug) console.log('导航', nav)

				if (!nav.href) {
					vk.toast('未维护导航地址');
					return;
				}
				// if (!this.$tools.checkLogin()) return

				if (nav.type == 'inner') {
					this.pageTo(nav.href);
				} else if (nav.type == 'wap') {
					this.pageToWap(nav.href);
				} else if (nav.type == 'wxmp') {
					this.pageToMP(nav.href);
				} else if (nav.type == 'func') {
					this.$tools[nav.href]()
				} else {
					vk.toast('导航尚未维护' + nav.type);
					return;
				}
			},
			// 点击了导航-更多
			clickNavMore() {
				this.pageTo('/pages/index/nav');
			},
			// 获取轮播图
			getBannerList() {
				this.bannerList = BANNER;
			},
			// 获取公告
			getNoticeList() {
				this.noticeList = NEWS.filter((item, index) => index < 3);
			},
			clickNotice(id) {
				let path = '/pages/common/single?id=' + id;
				let obj = this.noticeList.find(item => item.id == id);
				this.$tools.pageTo(path, obj);
			},
			// 产品供应列表
			getCpgyList() {
				this.cpgyList = GOODS.filter((item, index) => index < 5);
			},
			// 产品供应类别列表
			getCpgyCategoryList() {
				this.cpgyCategoryList = GOODS_CATEGORY.filter((item, index) => index < 4);
			},
			// 产品供应类别切换
			cpgyChange(index) {
				console.log("产品供应类别切换", index);
			},
			// 优选品牌列表
			getYxppList() {
				this.yxppList = BRAND.filter((item, index) => index < 12);
			},
			// 优选品牌类别列表
			getYxppCategoryList() {
				this.yxppCategoryList = BRAND_CATEGORY.filter((item, index) => index < 4);
			},
			// 优选品牌类别切换
			yxppChange(index) {
				console.log("优选品牌类别切换", index);
			},
			// 商品推荐列表
			getSptjList() {
				this.sptjList = GOODS.filter((item, index) => index < 10);
			},
			// 企业名录列表
			getQymlList() {
				this.qymlList = SUPPLIER.filter((item, index) => index < 5);
			},
			// 资讯头条列表
			getZxttList() {
				this.zxttList = NEWS.filter((item, index) => index < 5);
			},
			toDetail(id) {
				let path = `/pages/common/detail?id=${id}`;
				this.pageTo(path)
			},
			pageTo(path) {
				vk.navigateTo(path);
			},
			// 跳转到外部网站
			pageToWap(path) {
				// this.pageTo(`/pages/web_view/web_view?url=${path}`);
				location.href = path;
			},
			// 跳转到小程序
			pageToMP(appid) {
				// #ifdef MP-WEIXIN
				uni.navigateToMiniProgram({
					appId: appid,
					success(res) {
						// 打开成功
						console.log('打开成功')
					}
				})
				// #endif
				// #ifdef H5
				let appCode;
				if (appid == 'wxb85522c2bbe198bc') appCode = 'tijian';
				else if (appid == 'wx1bd7c68cb5318bf2') appCode = 'tiaojie';
				if (!appCode) {
					vk.toast('未配置小程序appid：' + appid);
					return;
				}
				this.$util.request(
						'http://api.haoyuekeji.top/http/router/plugs/lzy/weixin/client/pub.weixin.generateUrlLink', {
							appCode,
							path: '',
							query: '',
						}, 'GET')
					.then(res => {
						if (config.debug) console.log('获取小程序短链接res', res)
						if (res.code === 0) {
							location.href = res.data;
						} else {
							vk.toast(res.msg)
						}
					})
					.catch(err => {
						if (config.debug) console.log('获取小程序短链接err', err)
						vk.toast('获取小程序短链接err！' + JSON.stringify(err))
					})
				// #endif
			},
			clickBlock(dom) {
				vk.toast('点击了' + dom)
			}
		},
		// 监听器
		watch: {

		},
		// 计算属性
		computed: {

		},
		onPullDownRefresh() {
			this.initPage();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
	}
</script>

<style lang="scss" scoped>
	.header {}

	.footer {
		height: 50rpx;
	}

	.notice-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
	}

	.notice-image {
		padding: 20rpx;
		width: 140rpx;
		height: 120rpx;
	}

	.notice-main {
		width: calc(100% - 160rpx);
	}
	
	.notice-line {
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		align-items: center;
	}
	
	.notice-tag {
		margin-right: 20rpx;
		//padding: 10rpx 20rpx;
		width: 150rpx;
		height: 40rpx;
		line-height: 40rpx;
		background-color: #eee;
		color: orange;
		text-align: center;
	}

	.ad-bar{
		margin: 20rpx 0;
		padding: 20rpx 20rpx;
		display: flex;
		justify-content: space-between;
		background-color: #fff;
	}
	
	.ad-image{
		width: 45vw;
		height: 25vw;
	}
	
	.noc{
		min-width: 80rpx;
	}
	
	.grid-bar{
		padding: 10rpx 0 20rpx;
		background-color: #fff;
	}
	
	.qyml .imglist-item{
		height: 200rpx;
	}
	.qyml .imglist-item {
		align-items: flex-start;
	}
	.qyml .imglist-item .thumb {
		height: 160rpx;
	}
	
	.zxtt .imglist-item{
		height: 180rpx;
	}
	.zxtt .imglist-item {
		align-items: flex-start;
	}
	.zxtt .imglist-item .thumb {
		height: 120rpx;
	}
</style>